import React, { useLayoutEffect, useMemo } from "react";
import { LibAppView } from "../../../../lib";
import lodash from "lodash";
import UsersCard from "./UsersCard";
import styles from "./styles.module.scss";
import ResourceApproveSections from "./ResourceApproveSections";
import { Card, Row, Col, theme, Statistic } from "antd";
import { FundProjectionScreenOutlined } from "@ant-design/icons";


const topStyle = {
    marginTop: 15
};

const Main = LibAppView.withService({
    reqEndPoints: [{
        endPoint: "user.registeList",
        name: "registeUsers",
        withoutErrorHandle: true,
    }, {
        endPoint: "web.dashboard",
        name: "dashboard",
        withoutErrorHandle: true,
    }],
    "reqThrowException": false
})((props) => {
    const registeList = useMemo<any[]>(() => {
        return lodash.get(props.responseData, "registeUsers.data", [])
    },[]);
    const dashboard = useMemo<any>(() => {
        return lodash.get(props.responseData, "dashboard.data", {})
    },[]);
    const microApp = LibAppView.useMicroApp();
    const tokens = theme.useToken();
      
    useLayoutEffect(() => {
        microApp.registeJourney({
            name: "settings",
            title: "test journey",
            stepJourney: true,
            isTempJourney: true,
            steps: [{
                isMemoryPage: true,
                page: "admin.setting"
            }]
        });
    }, []);

    return (<section>
        <Row gutter={[16, { xs: 8, sm: 16, md: 24, lg: 18 }]}>
            <Col span={18}>
                <section>
                    <Row gutter={16}>
                        <Col span={4}>
                            <Card bordered={false}>
                                <Statistic
                                    title="活动数量"
                                    value={dashboard.activityCount}
                                    prefix={<FundProjectionScreenOutlined />}
                                />
                            </Card>
                        </Col>
                        <Col span={4}>
                            <Card bordered={false}>
                                <Statistic
                                    title="政策法规"
                                    value={dashboard.lawdocCount}
                                    prefix={<FundProjectionScreenOutlined />}
                                />
                            </Card>
                        </Col>
                        <Col span={4}>
                            <Card bordered={false}>
                                <Statistic
                                    title="科普专家"
                                    value={dashboard.expertCount}
                                    prefix={<FundProjectionScreenOutlined />}
                                />
                            </Card>
                        </Col>
                        <Col span={4}>
                            <Card bordered={false}>
                                <Statistic
                                    title="昨日访问"
                                    value={dashboard.yestodayCount}
                                    prefix={<FundProjectionScreenOutlined />}
                                />
                            </Card>
                        </Col>
                    </Row>
                </section>
                <div style={topStyle}></div>
                <UsersCard data={registeList || []} />
                <ResourceApproveSections />
            </Col>
            <Col span={6}>
                <Card title="科普资源">
                    {
                        dashboard.articleCount?.map((item: any) => {
                            return (
                                <div className={styles.dashboardNums} key={item.artType}>
                                    <span>{item.artTitle}</span>
                                    <i color={tokens.token.blue5}>{item.nums > 0 ? item.nums : '0'}</i>
                                </div>
                            );
                        })
                    }
                </Card>
                <Card title="科普资源访问量" style={{marginTop: 15}}>
                    {
                        dashboard.articleVisitsCount?.map((item: any) => {
                            return (
                                <div className={styles.dashboardNums} key={item.artType}>
                                    <span>{item.artTitle}</span>
                                    <i color={tokens.token.blue5}>{item.nums > 0 ? item.nums : '0'}</i>
                                </div>
                            );
                        })
                    }
                </Card>
            </Col>
             
        </Row>
    </section>);
});


export default Main;